<template>
  <div class="app-container flex">
    <el-row :gutter="16">
      <el-col :xs="24" :sm="12">
        <div class="card-body">
          <h1>您好-{{ userName }}</h1>
          <h2>欢迎使用外卖管理后台</h2>
          <div class="link-type">
            <router-link :to="'/'">
              <el-button type="primary">商城首页<i class="el-icon-right el-icon--right"></i></el-button>
            </router-link>
          </div>
          <div class="greeting-img">
            <img class="user-bg" src="../assets/images/bg.png" alt="" srcset="" />
          </div>
        </div>
      </el-col>

      <el-col :xs="24" :sm="12">
        <div class="grid">
          <div class="grid-content">
            <h1>当月总交易额</h1>
            <el-statistic group-separator="," :precision="2" :value="totalAmount">
              <template slot="suffix">
                <span style="font-size: 36px; color: #ffffff"> 元</span>
              </template>
            </el-statistic>
            <div class="planet">
              <div class="planet_shadow"></div>
              <div class="crater1"></div>
              <div class="crater2"></div>
              <div class="crater3"></div>
              <div class="crater4"></div>
            </div>
            <div class="star" :class="['star' + 0]"></div>
            <div class="star pink" :class="['star' + 1]"></div>
            <div class="star blue" :class="['star' + 2]"></div>
            <div class="star yellow" :class="['star' + 3]"></div>
          </div>

          <div class="grid-content">
            <h1>当月销售数量</h1>
            <el-statistic group-separator="," :precision="0" :value="numberOfSales">
              <template slot="suffix">
                <span style="font-size: 36px; color: #ffffff"> 件</span>
              </template>
            </el-statistic>
            <div class="planet">
              <div class="planet_shadow"></div>
              <div class="crater1"></div>
              <div class="crater2"></div>
              <div class="crater3"></div>
              <div class="crater4"></div>
            </div>
            <div class="star" :class="['star' + 0]"></div>
            <div class="star pink" :class="['star' + 1]"></div>
            <div class="star blue" :class="['star' + 2]"></div>
            <div class="star yellow" :class="['star' + 3]"></div>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12">
        <div class="bar-coninater">
          <bar-charts :barOption="barOption"></bar-charts>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12">
        <div class="bar-coninater">
          <pie-charts :pieArray="pieArray"></pie-charts>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import barCharts from "./components/indexEcharts/bar.vue";
import pieCharts from "./components/indexEcharts/pie.vue";
import { getMonthlyAnalysis, getPie, getNum } from "@/api/index";
export default {
  components: {
    barCharts,
    pieCharts,
  },
  data() {
    return {
      barOption: {
        xDate: [],
        yDate: [],
      },
      pieArray: [],
      numberOfSales: null,
      totalAmount: null,
    };
  },
  computed: {
    userName() {
      return this.$store.state.user.name;
    },
  },
  created() {
    this.getNum();
    this.monthlyAnalysis();
    this.getPie();
  },

  methods: {
    getNum() {
      getNum().then((res) => {
        try {
          this.numberOfSales = res.data[0].numberOfSales;
        this.totalAmount = res.data[0].totalAmount;
        } catch (error) {
          this.numberOfSales = 0
          this.totalAmount = 0
        }

      });
    },

    monthlyAnalysis() {
      getMonthlyAnalysis().then((res) => {
        const xData = res.data.map((item) => item.date);
        const yData = res.data.map((item) => item.total_amount);
        this.barOption.xDate = xData;
        this.barOption.yDate = yData;
      });
    },

    getPie() {
      getPie().then((res) => {
        this.pieArray = res.data;
        console.log(res);
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.card-body {
  margin-bottom: 12px;
  padding: 20px;
  position: relative;
  background-color: #334154;
  height: 274px;
  border-radius: 20px;
  min-width: 512px;
  color: #fff;

  > h1 {
    font-size: 3rem;
  }

  > h2 {
    margin-top: 12px;
    font-size: 2.125rem;
  }

  .link-type {
    margin-top: 58px;
  }

  .greeting-img {
    position: absolute;
    bottom: -2px;
    right: 0;

    .user-bg {
      height: 180px;
      user-select: none;
      -webkit-user-drag: none;
    }
  }
}

.grid {
  margin-bottom: 12px;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-gap: 14px;
  height: 274px;
  min-width: 512px;

  .grid-content {
    padding: 20px;

    border-radius: 20px;
    position: relative;
    background-image: linear-gradient(125deg, #546e91, #334154);
    color: #fff;
    overflow: hidden;

    .el-statistic {
      position: absolute;
      top: 58%;
      left: 50%;
      transform: translate(-50%, -50%);

      ::v-deep .number {
        font-size: 38px;
        font-weight: 500;
        color: #fff;
        font-family: pingfang;
      }
    }
  }
}

.progress_block {
  width: 45%;
  border-radius: 40px;
  height: 360px;
  position: relative;
  overflow: hidden;

  .name {
    color: #fff;
    font-size: 48px;
    position: absolute;
    top: 40px;
    left: 20px;
    max-width: 288px;
  }

  .value {
    color: #fff;
    font-size: 80px;
    position: absolute;
    top: 132px;
    left: 20px;
    max-width: 288px;
  }

  .circle {
    position: absolute;
    right: 16px;
    top: 32px;
  }

  .arcbar {
    position: absolute;
    right: -8px;
    top: 16px;
  }
}

.planet {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: #333;
  position: absolute;
  left: -13px;
  bottom: -26px;
  overflow: hidden;
  opacity: 0.5;
  z-index: 0;
}

.planet_shadow {
  position: absolute;
  border-radius: 50%;
  height: 100%;
  width: 100%;
  top: -40%;
  right: -10%;
  border: 35px solid rgba(0, 0, 0, 0.15);
}

.crater1,
.crater2,
.crater3,
.crater4 {
  position: absolute;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.3);
  box-shadow: inset 3px 3px 0 rgba(0, 0, 0, 0.2);
}

.crater1 {
  width: 20px;
  height: 20px;
  left: 25%;
  top: 20%;
}

.crater2 {
  width: 10px;
  height: 10px;
  left: 50%;
  top: 60%;
}

.crater3 {
  width: 15px;
  height: 15px;
  left: 30%;
  top: 65%;
}

.crater4 {
  width: 15px;
  height: 15px;
  left: 60%;
  top: 35%;
}

.star {
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fff;
  top: 10px;
  left: 50px;
  position: relative;
  transform-origin: 100% 0;
  box-shadow: 0 0 5px 5px rgba(255, 255, 255, 0.3);
  opacity: 0;
  z-index: 2;
}

.star0 {
  animation: star-ani 4s infinite ease-out;
}

.star1 {
  animation: star-ani 5s infinite ease-out;
}

.star2 {
  animation: star-ani 6s infinite ease-out;
}

.star3 {
  animation: star-ani 7s infinite ease-out;
}

.star:after {
  content: '';
  display: block;
  top: 20px;
  left: 60px;
  border: 0px solid #fff;
  border-width: 0px 90px 2px 90px;
  border-color: transparent transparent transparent rgba(255, 255, 255, 0.3);
  transform: rotate(-45deg) translate3d(1px, 3px, 0);
  box-shadow: 0 0 1px 0 rgba(255, 255, 255, 0.1);
  transform-origin: 0% 100%;
  animation: shooting-ani 100s infinite ease-out;
}

.pink {
  top: 14px;
  left: 40px;
  background: #ff5a99;
  animation-delay: 5s;
  -webkit-animation-delay: 5s;
  -moz-animation-delay: 5s;
}

.pink:after {
  border-color: transparent transparent transparent #ff5a99;
  animation-delay: 5s;
  -webkit-animation-delay: 5s;
  -moz-animation-delay: 5s;
}

.blue {
  top: 20px;
  left: 60px;
  background: cyan;
  animation-delay: 7s;
  -webkit-animation-delay: 7s;
  -moz-animation-delay: 7s;
}

.blue:after {
  border-color: 'transpareanimation-delay: 12s';
  -webkit-animation-delay: 7s;
  -moz-animation-delay: 7s;
  animation-delay: 7s;
}

.yellow {
  top: 10px;
  left: 70px;
  background: #ffcd5c;
  animation-delay: 5.8s;
}

.yellow:after {
  border-color: transparent transparent transparent #ffcd5c;
  animation-delay: 5.8s;
}

@keyframes star-ani {
  0% {
    opacity: 0;
    transform: scale(0) rotate(0) translate3d(0, 0, 0);
    -webkit-transform: scale(0) rotate(0) translate3d(0, 0, 0);
    -moz-transform: scale(0) rotate(0) translate3d(0, 0, 0);
  }

  50% {
    opacity: 0.5;
    transform: scale(1) rotate(0) translate3d(-20px, 20px, 0);
    -webkit-transform: scale(1) rotate(0) translate3d(-20px, 20px, 0);
    -moz-transform: scale(1) rotate(0) translate3d(-20px, 20px, 0);
  }

  100% {
    opacity: 0;
    transform: scale(1) rotate(0) translate3d(-30px, 30px, 0);
    -webkit-transform: scale(1) rotate(0) translate3d(-30px, 30px, 0);
    -moz-transform: scale(1) rotate(0) translate3d(-30px, 30px, 0);
  }
}

@font-face {
  font-family: pingfang;
  src: url('./yejing.TTF');
}

.bar-coninater {
  height: calc(100vh - 410px);
  width: 100%;
  min-width: 512px;
}
</style>
